<template>
	<view>
		<scroll-view id="container" :scroll-top="scrollTop" class="message-wrap" scroll-y="true">
			<view class="message-content" id="message-content">
				<template v-for="(item,index) in list">

					<!-- 我的消息 -->
					<div class="my" v-if="user.id == item.from_id" :key="index">
						<!-- 我的图片 -->
						<template v-if="item.MsgType == 'TIMImageElem'">
							<div class="msg" style="padding:0;background:transparent;"
								@click="onPrviewImage(item.content[0].URL)">
								<image class="photo" mode="aspectFill" :src="item.content[2].URL"></image>
							</div>
						</template>
						<!-- 我的面试邀请模板 -->
						<template
							v-else-if="message_invite_Type(item.content) || message_success_invite_Type(item.content)">
							<view class="other-side-jl other-side-jl-my">
								<div class="title">
									<image src="../../static/image/jl.png" mode=""></image>
									<div class="dd">
										<span>面试邀请</span>
										<span>{{handleInviteTime(item.content)}}</span>
									</div>
								</div>
							</view>
						</template>
						<!-- 投递简历模板 -->
						<template v-else-if="message_delivery_Type(item.content)">
							<view class="other-side-jl other-side-jl-my" @click="lookMyCv(user.cv_url)">
								<div class="title">
									<image src="../../static/image/jl.png" mode=""></image>
									<span>{{ user.nickname}}-{{ user.current_job_name}}.Pdf</span>
								</div>
							</view>
						</template>
						<template v-else-if="message_recorder_Type(item.MsgType)">
							<view class="other-side-jl other-side-jl-my recorder"
								@click="playRecoder(item.content, item.Second,index)">
								{{handleSecond(item.Seconds,item.Second)}}{{`''`}}
								<image src="../../static/image/recorder-my.png" mode=""></image>
							</view>
						</template>
						<!-- 消息模板 -->
						<template v-else>
							<div class="msg">{{item.content}}</div>
						</template>
						<div class="date">{{item.MsgTime | handleTime}}</div>
					</div>

					<!-- 对方消息 -->
					<div class="other-side" v-else :key="index">
						<!-- 图片 -->
						<template v-if="item.MsgType == 'TIMImageElem'">
							<div class="msg" style="background: transparent;padding: 0;"
								@click="onPrviewImage(item.content[0].URL)">
								<image class="photo" style="border-radius: 24upx 24upx 24upx 0;" mode="aspectFill"
									:src="item.content[2].URL"></image>
							</div>
						</template>
						<!-- 简历模板 -->
						<template v-else-if="message_invite_Type(item.content)">
							<view class="other-side-jl">
								<div class="title">
									<image src="../../static/image/jl.png" mode=""></image>
									<div class="dd">
										<span>对方给你发送面试邀请，是否同意</span>
										<span>{{handleInviteTime(item.content)}}</span>
									</div>

								</div>
								<div class="action" v-if="!message_success_invite_Type(item.content)">
									<button @click="onInviteBtn(0,item.content,item.MsgKey)">拒绝</button>
									<button @click="onInviteBtn(1,item.content, item.MsgKey)">同意</button>
								</div>
							</view>
						</template>
						<template v-else-if="message_success_invite_Type(item.content)">
							<view class="other-side-jl">
								<div class="title">
									<image src="../../static/image/jl.png" mode=""></image>
									<div class="dd">
										<span>对方给你发送面试邀</span>
										<span>{{handleInviteTime(item.content)}}</span>
									</div>
								</div>
							</view>
						</template>
						<!-- 简历模板 -->
						<template v-else-if="message_delivery_Type(item.content)">
							<view class="other-side-jl">
								<div class="title">
									<image src="../../static/image/jl.png" mode=""></image>
									<span>对方给你发送的简历，是否查看</span>
								</div>
								<div class="action">
									<!-- <button @click="onReject">拒绝</button> -->
									<button @click="onSuccess(item.content)">查看</button>
								</div>
							</view>
						</template>
						<!-- 语音 -->
						<template v-else-if="message_recorder_Type(item.MsgType)">
							<view class="other-side-jl recorder he-recorder"
								@click="playRecoder(item.content, item.Second,index)">
								<image src="../../static/image/recorder.png" mode=""></image>
								{{`''`}}{{handleSecond(item.Seconds,item.Seconds)}}
							</view>
						</template>

						<!-- 消息模板 -->
						<template v-else>
							<div class="msg">{{item.content}}</div>
						</template>

						<div class="date">{{item.MsgTime | handleTime}}</div>
					</div>
				</template>
			</view>
		</scroll-view>
		<div class="send-wrap" :style="{'bottom': keyHeight}">
			<image @click="onRecorder" class="recorder-btn" src="../../static/image/31yuyin@3x.png" mode=""></image>
			<!-- 图片 -->
			<image class="photo-btn" @click="sendPhoto" src="../../static/image/tupian@2x.png" mode=""></image>
			<div class="input">
				<!-- 语音 -->
				<span @touchstart="startTouchRecorder" :class="{'isRecorderB' : isRecorderB}"
					@touchend="endTouchRecorder" v-if="isRecorder">按住说话</span>

				<!-- 文字 -->
				<input v-else @focus="(e) => handleInputBug(e,1)" @blur="(e) => handleInputBug(e,2)" :style="inputStyle"
					cursor-spacing="96" :adjust-position="false" @confirm="sendMsg" type="text" v-model="msg"
					placeholder-class="color:#CCCCCC;">
				<!-- <div class="send-btn" @click="sendMsg">
					<image src="../../static/image/btn-send.png" mode=""></image>
				</div> -->
			</div>
			<!-- 	<template v-if="user.identity == 1">
				<button @click="handleOpen">发送简历</button>
			</template>
			<template v-else>
				<template v-if="myJobs.length > 0">
					<picker :range="myJobs" range-key="name" @change="onClickMyJob">
						<button @click="handleOpen">面试邀请</button>
					</picker>
				</template>
				<button @click="handleOpen" v-else>面试邀请</button>
			</template> -->
			<button @click="sendMsg">发送</button>

		</div>

		<InterviewInvitation @close="interviewDate_show = false" @confirm="onClickDelivery" v-if="interviewDate_show">
		</InterviewInvitation>


	</view>
</template>

<script>
	import InterviewInvitation from "@/components/InterviewInvitation.vue"
	const recorderManager = wx.getRecorderManager()
	import moment from '@/plugins/moment.min.js'
	export default {
		components: {
			InterviewInvitation
		},
		data() {
			return {
				heUser: null,
				heUserId: null,

				isCompleted: false,
				nextReqMessageID: null,
				list: [],
				msg: '',

				user: null,
				scrollTop: 0,
				inputStyle: '',
				interviewDate_show: false,

				jobShow: false,
				jobData: null,
				myJobs: [],

				isRecorder: false,
				recorderMsg: null, // 语音临时消息
				isRecorderPlay: true,
				playIndex: null,
				innerAudioContext: null,

				keyHeight: 'unset',
				isRecorderB: false
			};
		},
		onLoad({
			sendId
		}) {
			if (!sendId) return uni.showToast({
				title: '聊天参数错误',
				icon: 'none'
			})

			this.heUserId = sendId
			this.user = uni.getStorageSync('userInfo')


			this.getHeUser()
			this.getHistoryMsg()
			this.initMessageReceived()
			this.setMessageRead()

			if (this.user.identity == 2) this.getMyJobs()

			this.innerAudioContext = uni.createInnerAudioContext();




		},
		computed: {
			// 面试邀请
			message_invite_Type() {
				return (value) => {
					return value.indexOf('TYPE_INVITE') != -1
				}
			},
			message_success_invite_Type() {
				return (value) => {
					return value.indexOf('TYPE_SUCCESSINVITE') != -1
				}
			},
			message_delivery_Type() {
				return (value) => value.indexOf('TYPE_DELIVERY') != -1
			},
			message_recorder_Type() {
				return value => value == 'TIMSoundElem'
			},
			handleSecond() {
				return (value, time) => {
					console.log(time)
					return value <= 0 ? time : Math.floor(value)
				}
			},
			handleInviteTime() {
				return value => {
					let arr = value && value.split('&')
					// console.log(arr[1] && arr[1].split('TIME='))
					return arr[1] ? `面试时间：${arr[1].split('TIME=').pop()}` : ''
				}
			}
		},
		filters: {

			handleTime(value) {
				let date = Number(value + '000')
				var today = moment().startOf('day');
				if (moment(date).isSame(today, 'd')) {
					return moment(Number(value + '000')).format("HH:mm")
				} else {
					return moment(Number(value + '000')).format("MM-DD HH:mm")
				}
			}
		},
		methods: {
			playRecoder(value, second, index) {

				this.innerAudioContext.src = value
				this.playIndex = index

				this.innerAudioContext.onPlay(function(res) {
					// 一定要访问duration 否则onTimeUpdate不会触发
					var duration = this.innerAudioContext.duration;
				})
				this.innerAudioContext.onTimeUpdate(res => {
					console.log(res)
					if (this.list[this.playIndex].Seconds <= 0.3) {
						this.list[this.playIndex].Seconds = this.list[this.playIndex].Second
						this.innerAudioContext.stop()
						this.isRecorderPlay = true
						this.innerAudioContext.offTimeUpdate()
					} else {
						this.list[this.playIndex].Seconds -= 0.3
					}
				})
				console.log(this.isRecorderPlay)
				if (this.isRecorderPlay) {
					this.isRecorderPlay = false
					setTimeout(() => {
						this.innerAudioContext.play()
					}, 700)

				} else {
					this.isRecorderPlay = true
					this.innerAudioContext.pause()
				}



			},
			onPrviewImage(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			sendPhoto() {
				let that = this
				uni.chooseImage({

					count: 1,

					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

					sourceType: ['album'], // 从相册选择

					success: function(res) {

						let message = uni.$TUIKit.createImageMessage({

							to: that.heUserId,

							conversationType: uni.$TUIKitTIM.TYPES.CONV_C2C,

							payload: {
								file: res
							},

							onProgress: function(event) {
								console.log('file uploading:', event)
							}

						});

						// 2. 发送消息

						let promise = uni.$TUIKit.sendMessage(message);

						promise.then(imResponse => {

							// 发送成功

							console.log(imResponse);
							that.getHistoryMsg()

						}).catch(function(imError) {

							// 发送失败

							console.warn('sendMessage error:', imError);

						});

					}

				});
			},
			onRecorder() {
				this.isRecorder = !this.isRecorder
				wx.authorize({
					scope: 'scope.record',
					success: () => {
						this.RecorderStatus = true
					},
					fail: () => {
						wx.showModal({
							title: '提示',
							content: '您未授权录音，功能将无法使用',
							showCancel: true,
							confirmText: "授权",
							confirmColor: "#52a2d8",
							success: function(res) {
								if (res.confirm) {
									//确认则打开设置页面（重点）
									wx.openSetting({
										success: (res) => {
											console.log(res.authSetting);
											if (!res.authSetting['scope.record']) {
												//未设置录音授权
												console.log("未设置录音授权");
												this.RecorderStatus = false
												wx.showModal({
													title: '提示',
													content: '您未授权录音，功能将无法使用',
													showCancel: false,
													success: function(res) {},
												})
											} else {
												//第二次才成功授权
												this.RecorderStatus = true
												//错误回调
												recorderManager.onError((res) => {
													console.log(res);
												})
											}
										},
										fail: function() {
											console.log("授权设置录音失败");
											this.RecorderStatus = false
										}
									})
								} else if (res.cancel) {
									console.log("cancel");
								}
							},
							fail: function() {
								console.log("openfail");
								this.RecorderStatus = false
							}
						})
					}
				})
			},
			// 开始语音
			startTouchRecorder() {
				const options = {
					duration: 10000, //指定录音的时长，单位 ms
					sampleRate: 16000, //采样率
					numberOfChannels: 1, //录音通道数
					encodeBitRate: 96000, //编码码率
					format: 'mp3', //音频格式，有效值 aac/mp3
					frameSize: 50, //指定帧大小，单位 KB
				}
				recorderManager.start(options);
				this.recordering()
			},
			// 结束语音
			endTouchRecorder() {
				console.log('2323')
				this.isRecorderB = false
				recorderManager.stop()
				console.log(recorderManager)

			},
			// 录音
			recordering(options) {
				recorderManager.onStart((e) => {
					console.log(
						'recorder start', e)
					this.isRecorderB = true
				});
				recorderManager.onStop((res) => {
					console.log('recorder stop', res)
					this.isRecorderB = false
					this.recorderMsg = uni.$TUIKit.createAudioMessage({
						// to: `C2C${this.heUserId}`,
						to: this.heUserId,
						conversationType: uni.$TUIKitTIM.TYPES.CONV_C2C,
						payload: {
							file: res
						},
					})
					uni.showModal({
						title: "语音消息",
						content: "发送当前语音消息吗?",
						success: () => {
							uni.$TUIKit.sendMessage(this.recorderMsg).then(imResponse => {
								// 发送成功
								console.log(imResponse);
								// this.list.push({
								// 	from_id: this.user.id,
								// 	touid: this.heUserId,
								// 	MsgTime: String(new Date().getTime()).slice(0, 10),
								// 	content: '语音消息'
								// })
								this.getHistoryMsg()
							}).catch(function(imError) {
								// 发送失败
								console.warn('sendMessage error:', imError);
							});
						}
					})
				})
				recorderManager.onError((e) => {
					console.log(
						'recorder error', e)
					this.isRecorderB = false
				});

			},
			async getInterview() {},
			// 拒绝
			async onInviteBtn(type, msg, msg_key) {
				// let id = msg.split('TYPE_INVITE_')[1]
				// const { data } = await this.$http.Message.lastDelivery(this.user.id, this.heUserId)

				let arr = msg && msg.split('&')
				if (!arr[2]) {
					return false
				}

				const result = await this.$http.Company.agreeinterview(arr[2].split('MSID=').pop(), type, msg_key)
				if (result.code == 200 && result.data) {
					const {
						code
					} = await this.$http.Message.sendIm({
						to_id: this.heUserId,
						message: `我已同意邀请, 面试时间：${arr[1].split('TIME=').pop()}`
					})
					this.getHistoryMsg()
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
				}



				// const {
				// 	code
				// } = await this.$http.Message.sendIm({
				// 	to_id: this.detail.id,
				// 	message: type == 1 ? '不好意思，您不符合公司的招聘要求，祝你找到满意的工作' : ''
				// })
			},
			onSuccess(msg) {
				console.log(msg)
				let url = (msg.split('&JIANLI=')[1]).replace(/[\\]/g, '')
				console.log(url)
				uni.navigateTo({
					url: '/pages/message/webView?url=' + url
				})
			},
			lookMyCv(url) {
				uni.navigateTo({
					url: '/pages/message/webView?url=' + url
				})
			},
			async getMyJobs() {
				const {
					data
				} = await this.$http.Company.jobpublish({
					type: 'all'
				})
				this.myJobs = data.data.map(x => {
					console.log(x)
					return x
				})
			},
			onClickMyJob(e) {
				this.jobData = this.myJobs[e.detail.value]
				this.interviewDate_show = true
			},
			handleOpen() {
				if (this.myJobs.length <= 0 && this.user.identity == 2) {
					return uni.showToast({
						title: '您还没发布职位，请先发布职位',
						icon: 'none'
					})
				}
				if (this.user.identity == 1) {
					if (!this.user.cv_url) {
						return uni.showToast({
							title: '请先上传附件简历',
							icon: 'none'
						})
					}
					if (!this.user.current_job_name) {
						return uni.showToast({
							title: '您还没编辑在线简历，请先编辑简历',
							icon: 'none'
						})
					}
					this.sendDelivery()
					return false
				}
				this.jobShow = true
			},
			// 投递简历
			async sendDelivery() {
				const {
					data
				} = await this.$http.Message.lastJob(this.user.id, this.heUserId)
				console.log(data)
				const {
					code,
					msg
				} = await this.$http.Recruit.delivery(data)
				uni.showToast({
					title: code == 200 ? "投递成功" : msg,
					icon: 'none'
				})
				if (code == 200) this.sendIm()
			},
			// 发送投递简历
			async sendIm() {

				const {
					code
				} = await this.$http.Message.sendIm({
					to_id: this.heUserId,
					message: 'TYPE_DELIVERY_' + this.heUserId + '&JIANLI=' + this.user.cv_url
				})

			},
			// 设置已读消息
			setMessageRead() {
				// 将某会话下所有未读消息已读上报
				let promise = uni.$TUIKit.setMessageRead({
					conversationID: `C2C${this.heUserId}`
				});
				promise.then(function(imResponse) {
					// 已读上报成功，指定 ID 的会话的 unreadCount 属性值被置为0
				}).catch(function(imError) {
					// 已读上报失败
					console.warn('setMessageRead error:', imError);
				});
			},
			scrollView() {
				this.$nextTick(() => {
					let query = uni.createSelectorQuery().in(this)
					query.select('#container').boundingClientRect()
					query.select('#message-content').boundingClientRect()
					query.exec((res) => {
						//如果子元素高度大于父元素高度(显示高度)
						console.log(res)
						// console.log(res11)
						// if (res[1].height > res[0].height) {
						// 	//计算出二者差值就是需要滚动的距离
						// 	this.commentScrollTop = res[1].height - res[0].height
						// }
						this.scrollTop = res[1] && res[1].height + 1000
					})
					console.log(this.scrollTop)
				})
			},
			// 监听消息
			initMessageReceived() {
				uni.$TUIKit.on(uni.$TUIKitEvent.MESSAGE_RECEIVED, this.messageReceived);
			},
			// 监听处理
			messageReceived(event) {
				console.log(event)
				this.getHistoryMsg()
				let nowMessage = event.data.map(x => {
					if (x.from == this.heUserId) {
						x.content = this.asciiToNative(x.payload.extension).replace(/^["|'](.*)["|']$/g,
							"$1");
						x.from_id = x.from

						// this.list.push(x)
					}
				})
			},

			getHeUser() {
				let promise = uni.$TUIKit.getConversationProfile(`C2C${this.heUserId}`);
				promise.then(imResponse => {
					// 获取成功
					console.log(imResponse.data.conversation); // 会话资料
					this.heUser = imResponse.data.conversation
					uni.setNavigationBarTitle({
						title: imResponse.data.conversation.userProfile.nick
					})
				}).catch(function(imError) {
					console.warn('getConversationProfile error:', imError); // 获取会话资料失败的相关信息
				});
			},
			asciiToNative(content) {
				if (!content) {
					return false;
				}
				content = content.split("\\u");
				let native = content[0];
				for (let i = 1; i < content.length; i++) {
					let code = content[i];
					native += String.fromCharCode(parseInt("0x" + code.substring(0, 4)));
					if (code.length > 4) {
						native += code.substring(4, code.length);
					}
				}
				return native;
			},
			async getHistoryMsg() {
				const {
					data
				} = await this.$http.Company.imHistory(this.heUserId)
				this.list = data ? data.map(x => {
					x.Seconds = x.Second
					return x
				}) : []
				console.log(data)
				return false
				// uni.$TUIKit.getMessageList({
				// 	conversationID: `C2C${this.heUserId}`,
				// 	count: 15
				// }).then(imResponse => {
				// 	console.log(imResponse.data)
				// 	var reg = /^["|'](.*)["|']$/g;
				// 	// 消息列表。
				// 	const messageList = imResponse.data.messageList.map(x => {
				// 		x.payload.extension = this.asciiToNative(x.payload.extension).replace(
				// 			/^["|'](.*)["|']$/g, "$1");
				// 		return x
				// 	})

				// 	const nextReqMessageID = imResponse.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。

				// 	this.isCompleted = imResponse.data
				// 		.isCompleted; // 表示是否已经拉完所有消息。isCompleted 为 true 时，nextReqMessageID 为 ""。
				// 	console.log(messageList)
				// 	this.list = [...this.list, ...messageList]

				// 	this.nextReqMessageID = nextReqMessageID


				// });
			},
			async sendMsg() {
			


				if ((this.msg.trim()).length <= 0) return uni.showToast({
					title: '请输入消息内容',
					icon: 'none'
				})

				// 同意
				const {
					code,
					data
				} = await this.$http.Message.sendIm({
					to_id: this.heUserId,
					message: this.msg
				})
				if (code == 200) {
					this.list.push(data)
					// this.list.push({
					// 	from: this.user.id,
					// 	to: this.heUserId,
					// 	time: String(new Date().getTime()).slice(0, 10),
					// 	payload: {
					// 		extension: this.msg.trim()
					// 	},
					// })

					this.msg = ''
				}



			},

			// 面试邀请
			async onClickDelivery(time) {
				const {
					code,
					msg,
					data
				} = await this.$http.Company.interview({
					job_id: this.jobData.id,
					uid: this.heUserId,
					start_time: time
				})
				uni.showToast({
					title: code == 200 ? "邀请成功" : msg,
					icon: 'none'
				})
				if (code == 200) this.sendImInvite(time, data)
			},
			// 发送面试邀请
			async sendImInvite(time, data) {
				this.interviewDate_show = false
				const {
					code
				} = await this.$http.Message.sendIm({
					to_id: this.heUserId,
					message: 'TYPE_INVITE_' + this.heUserId + '&TIME=' + time + '&MSID=' + data
				})
				this.getHistoryMsg()
				// this.list.push({
				// 	from: this.user.id,
				// 	to: this.heUserId,
				// 	time: String(new Date().getTime()).slice(0, 10),
				// 	payload: {
				// 		extension: 'TYPE_INVITE_' + this.jobData.id
				// 	},
				// })
			},
			handleInputBug(e, type) {
				console.log(e.detail.height)
				this.keyHeight = type == 1 ? e.detail.height + "px" : 'unset'
			}
		},
		updated() {
			this.scrollView()
			this.setMessageRead()
		},
		onUnload() {
			console.log('退')
			uni.$TUIKit.off(uni.$TUIKitEvent.MESSAGE_RECEIVED, this.messageReceived);
		}
	}
</script>

<style lang="less" scoped>
	.message-wrap {
		background: #F4F5F6;
		height: calc(100vh - (140upx + env(safe-area-inset-bottom)));

		.message-content {
			background: #F4F5F6;
			padding: 0 48upx;
			padding-bottom: 20upx;

			.recorder {
				padding: 24upx 32upx;
				display: flex;
				align-items: center;
				color: #fff;
				background: #2AABE2 !important;

				image {
					width: 36upx;
					height: 36upx;
					margin-left: 10upx;
					transform: rotate(180deg);
				}
			}

			.he-recorder {
				background: #fff !important;
				color: #333;

				image {
					transform: rotate(0deg) !important;
					margin: 0;
					margin-right: 10upx;
				}
			}

			.other-side,
			.my {

				.msg {
					background: #fff;
					padding: 24upx 32upx;
					border-radius: 24upx 24upx 24upx 0;
					color: #666E7A;
					font-size: 24upx;
					font-weight: 400;
					margin-top: 50upx;
					// max-width: ;
				}

				.photo {
					width: 40vw;
					border-radius: 24upx 24upx 0 24upx;
				}

				.date {
					color: #666E7A;
					font-size: 24upx;
					font-weight: 400;
					margin-top: 14upx;
				}
			}

			.other-side {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				border-radius: 24upx 24upx 0 24upx;
			}

			.other-side-jl-my {
				border-radius: 24upx 24upx 0 24upx !important;
			}

			.other-side-jl {
				background-color: #fff;
				border: 1px solid #F4F4F4;
				border-radius: 24upx 24upx 24upx 0;
				margin-bottom: 14upx;
				margin-top: 48upx;

				.title {
					display: flex;
					align-items: center;
					padding: 24upx 30upx;
					padding-bottom: 20upx;
					border-bottom: 1px solid #F4F4F4;

					image {
						width: 68upx;
						height: 68upx;
					}

					.dd {
						display: flex;
						flex-direction: column;
					}

					span {
						padding-left: 20upx;
						color: #666E7A;
						font-size: 24upx;
						font-weight: 400;
					}
				}

				.action {
					display: flex;
					align-items: center;
					height: 82upx;

					button {
						color: #999999;
						font-size: 24upx;
						font-weight: 400;
						flex: 1;
						border: unset;
						background: unset;

						&::after {
							border: unset;
						}

						&:last-of-type {
							color: #2AABE2;

						}
					}
				}
			}

			.my {
				display: flex;
				justify-content: flex-end;
				flex-direction: column;
				align-items: flex-end;

				.msg {
					background: #2AABE2;
					border-radius: 24upx 24upx 0 24upx;
					color: #fff;
				}
			}
		}


	}

	.send-wrap {
		padding: 0 32upx;
		background: #fff;
		display: flex;
		align-items: center;
		// padding-bottom: env(safe-area-inset-bottom);
		padding-top: 32upx;
		height: 96upx;
		position: fixed;
		bottom: 'unset';
		box-sizing: unset;
		padding-bottom: 5px;
		width: calc(100vw - 64upx);

		.recorder-btn,
		.photo-btn {
			width: 48upx;
			height: 48upx;
			margin-right: 20upx;
		}

		.isRecorderB {
			background: #2AABE2 !important;
			color: #fff !important;
		}

		.input {
			display: flex;
			align-items: center;
			border: 1px solid #EEEEEE;
			flex: 1;
			height: 96upx;



			input {
				color: #333;
				font-size: 28upx;
				font-weight: 400;
				flex: 1;
				padding: 0 32upx;
			}

			span {
				color: #2AABE2;
				font-size: 28upx;
				font-weight: 400;
				text-align: center;
				flex: 1;
				height: 96upx;
				line-height: 96upx;
				background: #eee;
				display: inline-block;
			}

			.send-btn {
				width: 96upx;
				height: 96upx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		button {
			width: 132upx;
			height: 96upx;
			line-height: 96upx;
			background: #2AABE2;
			color: #fff;
			font-size: 24upx;
			margin-left: 20upx;

		}
	}
</style>
